<template>
  <div>
    <el-card class="cardbox" shadow="always">
      <div class="cardcontent clearfix">
        <div class="cardleft">
          <div class="cardleftyuan" style="background: #5BD171;">
            <svg-icon icon-class="hometu" style="font-size: 24px;color: #ffffff"></svg-icon>
          </div>
        </div>
        <div class="cardright">
          <p class="cardtit">查询补货相关信息</p>
          <div class="carddes">查询补货相关信息。</div>
        </div>
      </div>
      <div class="cardfooter">
        <el-button class="footerbtn" type="text" @click="dialog=true">查询</el-button>
      </div>
    </el-card>
    <el-dialog title="查询补货相关信息"
               :visible.sync="dialog"
               :close-on-click-modal="false"
               width="70%"
               top="50px">
      <el-form ref="QueryForm" label-width="100px" :model="QueryForm" :rules="Queryrule">
        <div class="clearfix">
          <el-form-item label="机器SN:" style="float: left;width:300px;" prop="sn">
            <el-input v-model="QueryForm.sn" placeholder="请输入机器SN"></el-input>
          </el-form-item>
          <el-form-item label="货道编号:" style="float: left;width:300px;">
            <el-input v-model="QueryForm.slot_index" placeholder="请输入货道编号"></el-input>
          </el-form-item>
          <el-button style="float: left;margin-left: 15px" type="primary" icon="el-icon-search" @click="Query(true)">
            查询
          </el-button>
        </div>
      </el-form>
      <el-table v-loading="Loading"
                element-loading-text="加载中"
                header-cell-class-name="tableheader"
                :data="list"
                border
                fit>
        <el-table-column label="用户ID" prop="baseuserid"></el-table-column>
        <el-table-column label="商户姓名" prop="uname"></el-table-column>
        <el-table-column label="机器名称" prop="mch_name"></el-table-column>
        <el-table-column label="操作时间" prop="add_time"></el-table-column>
        <el-table-column label="补货之前的数" prop="before_count"></el-table-column>
        <el-table-column label="补货之后的数" prop="after_count"></el-table-column>
        <el-table-column label="最大补货数" prop="max_count"></el-table-column>
        <el-table-column label="备注" prop="remark"></el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
            style="text-align: center"
            layout="prev, pager, next"
            small
            :current-page="QueryForm.page"
            :page-size="QueryForm.pagesize"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"/>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      QueryForm: {
        sn: '',
        slot_index: '',
        isPage: true,
        page: 1,
        pagesize: 15,
      },
      Queryrule: {
        sn: [
          { required: true, message: '请先输入机器SN' }
        ],
      },
      list: [],
      total: 0,
      Loading: false,
      dialog: false,
    };
  },
  methods: {
    Query(isquery) {
      this.$refs['QueryForm'].validate((valid) => {
        if (valid) {
          if (isquery === true) {
            this.QueryForm.page = 1
          }
          this.Loading = true;
          this.$post(this.$api + '/replenishment/get_replenishment_record_infos', this.QueryForm)
              .then((res) => {
                this.Loading = false;
                if (res.code === 0) {
                  this.list = res.rows;
                  this.total = res.total;
                } else {
                  this.$notify({
                    title: '失败',
                    message: res.msg,
                    type: 'error'
                  });
                }
              })
        }
      })
    },
    handleSizeChange(v) {
      this.QueryForm.pagesize = v;
      this.Query()
    },
    handleCurrentChange(v) {
      this.QueryForm.page = v;
      this.Query()
    },
  }
}
</script>
